<template>
  <el-dialog
    class="user-role-dialog"
    :visible.sync="visible"
    title="用户角色详情"
    width="600px"
    :close-on-click-modal="false"
  >
    <section class="urd-section">
      <h1 class="urd-section-title">用户信息</h1>

      <el-row tag="dl" type="flex">
        <dt>用户名:</dt>
        <dd>{{ currentUser.userShowName }}</dd>
        <dt>部门:</dt>
        <dd>{{ currentUser.deptName }}</dd>
      </el-row>
    </section>
    <section class="urd-section">
      <h1 class="urd-section-title">当前角色</h1>
      <div class="user-role-list">
        <el-tag
          v-for="item of userRoles"
          :key="item.id"
          size="small"
          closable
          @close="handleRemoveUserRole(item)"
          @click="handleClickRoleTag(item)"
        >
          {{ item.name }}
        </el-tag>
      </div>
    </section>
    <section class="urd-section">
      <h1 class="urd-section-title">新增角色</h1>
      <VGrid
        v-if="visible"
        ref="vgrid"
        :formConfig="formConfig"
        :tableConfig="tableConfig"
        :proxy="proxy"
        :paginationConfig="paginationConfig"
        @handleTableBtnClick="handleTableBtnClick"
      ></VGrid>
    </section>

    <div slot="footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="$wait.is('account.user.editUserRole')">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import VGrid from '@/components/VGrid';

export default {
  components: {
    VGrid,
  },
  data() {
    return {
      visible: false,
      currentUser: {},
      // 用户角色list
      userRoles: [],

      formConfig: {
        props: {
          inline: true,
        },
        btns: [
          {
            key: 'submit',
            label: '搜索',
          },
          {
            key: 'reset',
            label: '重置',
          },
        ],
        fieldList: [
          {
            type: 'input',
            model: 'name',
            label: '',
            props: {
              placeholder: '请输入角色名搜索',
            },
          },
        ],
      },
      tableConfig: {
        props: {
          border: true,
          stripe: true,
        },
        columnList: [
          {
            prop: 'name',
            label: '角色名',
          },
          {
            label: '操作',
            type: 'operation',
            btns: [
              {
                key: 'add',
                label: '分配',
                visible: row => {
                  return !this.hasRole(row);
                },
              },
              {
                key: 'cancel',
                label: '取消分配',
                visible: row => {
                  return this.hasRole(row);
                },
              },
            ],
          },
        ],
      },
      proxy: {
        list: {
          api: this.$api.account.role.getRoleList,
        },
      },
    };
  },
  methods: {
    show(model) {
      this.visible = true;

      this.currentUser = { ...model };

      this.fetchUserRoles();
    },

    close() {
      this.visible = false;
    },

    handleTableBtnClick(key, row) {
      if (key === 'add') {
        this.handleAddUserRole(row);
      } else if (key === 'cancel') {
        this.handleRemoveUserRole(row);
      }
    },

    /**
     * 更新用户角色数据
     */
    fetchUserRoles() {
      if (this.currentUser && this.currentUser.id) {
        this.userRoles = this.currentUser.roleList.map(item => {
          return {
            id: item.roleId,
            name: item.roleName,
          };
        });
      }
    },

    hasRole(role) {
      return this.userRoles.some(item => Number(item.id) === Number(role.id));
    },

    /**
     * 点击role的标签回调
     * @param role 角色的信息
     */
    handleClickRoleTag(role) {
      // 查询条件处rolename置成点击的role的name
      this.$refs.vgrid.setFormData('name', role.name);
      this.$refs.vgrid.getTableData();
    },

    handleRoleChange(role, type) {
      const hasRole = this.hasRole(role);
      if (type === 'add' && !hasRole) {
        this.userRoles.push(role);
      }

      if (type === 'remove' && hasRole) {
        this.userRoles.splice(
          this.userRoles.findIndex(item => item.id === role.id),
          1
        );
      }
    },
    /**
     * 新增用户角色
     * @param role 角色信息
     */
    handleAddUserRole(role) {
      this.handleRoleChange(role, 'add');
    },

    /**
     * 新增用户角色
     * @param role 角色信息
     */
    handleSubmit() {
      const {
        currentUser: { id },
        userRoles,
      } = this;

      const params = {
        id,
        roleIds: userRoles.map(item => item.id).join(','),
      };
      this.$api.account.user.editUserRole(params).then(() => {
        this.$emit('submit');
        this.$message.success('修改角色成功！');
        this.close();
      });
    },
    /**
     * 删除 角色
     * @param role 角色信息
     */
    handleRemoveUserRole(role) {
      this.handleRoleChange(role, 'remove');
    },
  },
};
</script>

<style lang="scss" scoped>
.user-role-dialog {
  .urd-section {
    &:not(:last-child) {
      margin-bottom: 20px;
    }

    &-title {
      font-size: 16px;
      margin-bottom: 10px;
    }
  }

  dt {
    margin-right: 5px;
    font-weight: bold;

    &:not(:first-child) {
      margin-left: 20px;
    }
  }

  .user-role-list {
    display: flex;
    flex-wrap: wrap;

    .el-tag {
      flex: 0 1 percentage(1 / 8);
      width: auto;
      margin-top: 10px;

      &:not(:last-child) {
        margin-right: 10px;
      }
    }
  }
}
</style>
